<template>
    <div class="region-selector">
      <!-- 省份信息区域 -->
      <div class="section">
        <div class="section-header">
          <span class="icon">📍</span>
          <span class="title">省份信息</span>
          <a class="back-link" @click="handleBack">返回全国</a>
        </div>
        
        <div class="province-grid">
          <a v-for="province in provinces" 
             :key="province.code"
             :class="['province-item', { active: selectedProvince === province.name, disabled: isDisabledProvince(province.name) }]"
             @click="!isDisabledProvince(province.name) && selectProvince(province)">
            {{ province.name }}
          </a>
        </div>
      </div>
  
      <!-- 城市信息区域 -->
      <div class="section-area" v-if="selectedProvince">
        <div class="section-header-area">
          <span class="icon">🏙️</span>
          <span class="title">城市信息</span>
        </div>
        
        <div class="city-grid">
          <a v-for="city in cities[selectedProvince]" 
             :key="city.code"
             :class="['city-item', { active: selectedCity === city.name }]"
             @click="selectCity(city)">
            {{ city.name }}
          </a>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref,defineEmits } from 'vue'
  
  const selectedProvince = ref('广东')
  const selectedCity = ref('惠州市')
  
// 定义 emit 函数
const emit = defineEmits(['citySelected'])

  // 模拟省份数据
  const provinces = ref([
    { code: 'bj', name: '北京' },
    { code: 'tj', name: '天津' },
    { code: 'hb', name: '河北' },
    { code: 'sx', name: '山西' },
    { code: 'nm', name: '内蒙古' },
    { code: 'ln', name: '辽宁' },
    { code: 'jl', name: '吉林' },
    { code: 'hl', name: '黑龙江' },
    { code: 'sh', name: '上海' },
    { code: 'js', name: '江苏' },
    { code: 'zj', name: '浙江' },
    { code: 'ah', name: '安徽' },
    { code: 'fj', name: '福建' },
    { code: 'jx', name: '江西' },
    { code: 'sd', name: '山东' },
    { code: 'he', name: '河南' },
    { code: 'hb', name: '湖北' },
    { code: 'hn', name: '湖南' },
    { code: 'gd', name: '广东' },
    { code: 'gx', name: '广西' },
    { code: 'hi', name: '海南' },
    { code: 'cq', name: '重庆' },
    { code: 'sc', name: '四川' },
    { code: 'gz', name: '贵州' },
    { code: 'yn', name: '云南' },
    { code: 'xz', name: '西藏' },
    { code: 'sn', name: '陕西' },
    { code: 'gs', name: '甘肃' },
    { code: 'qh', name: '青海' },
    { code: 'nx', name: '宁夏' },
    { code: 'xj', name: '新疆' },
    { code: 'tw', name: '台湾' },
    { code: 'hk', name: '香港' },
    { code: 'mo', name: '澳门' }
  ])
  
  // 模拟城市数据
  const cities = ref({
    '广东': [
      { code: 'gz', name: '广州市' },
      { code: 'sz', name: '深圳市' },
      { code: 'dg', name: '东莞市' },
      { code: 'fs', name: '佛山市' },
      { code: 'zh', name: '珠海市' },
      { code: 'st', name: '汕头市' },
      { code: 'zs', name: '中山市' },
      { code: 'sg', name: '韶关市' },
      { code: 'hu', name: '惠州市' },
      { code: 'jm', name: '江门市' },
      { code: 'zj', name: '湛江市' },
      { code: 'mm', name: '茂名市' },
      { code: 'yj', name: '阳江市' },
      { code: 'qy', name: '清远市' },
      { code: 'cz', name: '潮州市' },
      { code: 'jy', name: '揭阳市' },
      { code: 'yf', name: '云浮市' }
    ],
    '北京': [
      { code: 'bj', name: '北京市' }
    ],
    '天津': [
      { code: 'tj', name: '天津市' }
    ],
    '河北': [
      { code: 'sjz', name: '石家庄市' },
      { code: 'bd', name: '保定市' },
      { code: 'ts', name: '唐山市' },
      { code: 'lf', name: '廊坊市' },
      { code: 'hd', name: '邯郸市' },
      { code: 'qhd', name: '秦皇岛市' },
      { code: 'cangzhou', name: '沧州市' },
      { code: 'xt', name: '邢台市' },
      { code: 'hs', name: '衡水市' },
      { code: 'zjk', name: '张家口市' },
      { code: 'chengde', name: '承德市' },
      { code: 'xa',name:'雄安新区'}
    ],
    '山西': [
      { code: 'ty', name: '太原市' },
      { code: 'dt', name: '大同市' },
      { code: 'yc', name: '阳泉市' },
      { code: 'cz', name: '长治市' },
      { code: 'jz', name: '晋中市' },
      { code: 'lf', name: '临汾市' },
      { code: 'yq', name: '运城市' },
      { code: 'xz', name: '忻州市' },
      { code: 'll', name: '吕梁市' },
      { code: 'jc', name: '晋城市' },
      { code: 'sz', name: '朔州市' }
    ],
    '内蒙古': [
      { code: 'hhht', name: '呼和浩特市' },
      { code: 'bt', name: '包头市' },
      { code: 'wlc', name: '乌兰察布市' },
      { code: 'erds', name: '鄂尔多斯市' },
      { code: 'hlbe', name: '呼伦贝尔市' },
      { code: 'tl', name: '通辽市' },
      { code: 'byne', name: '巴彦淖尔市' },
      { code: 'wh', name: '乌海市' },
      { code: 'cf', name: '赤峰市' },
      { code: 'alsm', name: '阿拉善盟' },
      { code: 'xlglm', name: '锡林郭勒盟' },
      { code: 'xam', name: '兴安盟' }
    ],
    '辽宁': [
      { code: 'sy', name: '沈阳市' },
      { code: 'dl', name: '大连市' },
      { code: 'as', name: '鞍山市' },
      { code: 'fs', name: '抚顺市' },
      { code: 'bx', name: '本溪市' },
      { code: 'dd', name: '丹东市' },
      { code: 'jl', name: '锦州市' },
      { code: 'yk', name: '营口市' },
      { code: 'fx', name: '阜新市' },
      { code: 'ly', name: '辽阳市' },
      { code: 'pj', name: '盘锦市' },
      { code: 'tl', name: '铁岭市' },
      { code: 'cy', name: '朝阳市' },
      { code: 'hz', name: '葫芦岛市' }
    ],
    '吉林': [
      { code: 'cc', name: '长春市' },
      { code: 'jl', name: '吉林市' },
      { code: 'sp', name: '四平市' },
      { code: 'ly', name: '辽源市' },
      { code: 'th', name: '通化市' },
      { code: 'bs', name: '白山市' },
      { code: 'sy', name: '松原市' },
      { code: 'bc', name: '白城市' },
      { code: 'yanbian', name: '延边朝鲜族自治州' }
    ],
    '黑龙江': [
      { code: 'hrb', name: '哈尔滨市' },
      { code: 'qqhr', name: '齐齐哈尔市' },
      { code: 'jms', name: '佳木斯市' },
      { code: 'mdj', name: '牡丹江市' },
      { code: 'jixi', name: '鸡西市' },
      { code: 'hegang', name: '鹤岗市' },
      { code: 'shuangyashan', name: '双鸭山市' },
      { code: 'daqing', name: '大庆市' },
      { code: 'yichun', name: '伊春市' },
      { code: 'qth', name: '七台河市' },
      { code: 'heihe', name: '黑河市' },
      { code: 'suihua', name: '绥化市' },
      { code: 'dxal', name: '大兴安岭地区' }
    ],
    '上海': [
      { code: 'sh', name: '上海市' }
    ],
    '江苏': [
      { code: 'nj', name: '南京市' },
      { code: 'sz', name: '苏州市' },
      { code: 'wx', name: '无锡市' },
      { code: 'cz', name: '常州市' },
      { code: 'nt', name: '南通市' },
      { code: 'lyg', name: '连云港市' },
      { code: 'ha', name: '淮安市' },
      { code: 'yc', name: '盐城市' },
      { code: 'yz', name: '扬州市' },
      { code: 'zj', name: '镇江市' },
      { code: 'tz', name: '泰州市' },
      { code: 'sq', name: '宿迁市' },
      { code: 'xz', name: '徐州市' }
    ],
    '浙江': [
      { code: 'hz', name: '杭州市' },
      { code: 'nb', name: '宁波市' },
      { code: 'wz', name: '温州市' },
      { code: 'sx', name: '绍兴市' },
      { code: 'jh', name: '金华市' },
      { code: 'tz', name: '台州市' },
      { code: 'jx', name: '嘉兴市' },
      { code: 'huzhou', name: '湖州市' },
      { code: 'lishui', name: '丽水市' },
      { code: 'quzhou', name: '衢州市' },
      { code: 'zhoushan', name: '舟山市' }
    ],
    '安徽': [
      { code: 'hf', name: '合肥市' },
      { code: 'wuhu', name: '芜湖市' },
      { code: 'bengbu', name: '蚌埠市' },
      { code: 'huainan', name: '淮南市' },
      { code: 'maanshan', name: '马鞍山市' },
      { code: 'huaibei', name: '淮北市' },
      { code: 'tongling', name: '铜陵市' },
      { code: 'anqing', name: '安庆市' },
      { code: 'huangshan', name: '黄山市' },
      { code: 'chuzhou', name: '滁州市' },
      { code: 'fy', name: '阜阳市' },
      { code: 'suzhou', name: '宿州市' },
      { code: 'chaohu', name: '巢湖市' },
      { code: 'luan', name: '六安市' },
      { code: 'bozhou', name: '亳州市' },
      { code: 'chizhou', name: '池州市' },
      { code: 'xuancheng', name: '宣城市' }
    ],
    '福建': [
      { code: 'fz', name: '福州市' },
      { code: 'xm', name: '厦门市' },
      { code: 'pt', name: '莆田市' },
      { code: 'sm', name: '三明市' },
      { code: 'qz', name: '泉州市' },
      { code: 'zz', name: '漳州市' },
      { code: 'np', name: '南平市' },
      { code: 'ly', name: '龙岩市' },
      { code: 'nd', name: '宁德市' }
    ],
    '江西': [
      { code: 'nc', name: '南昌市' },
      { code: 'jj', name: '九江市' },
      { code: 'ganzhou', name: '赣州市' },
      { code: 'jdz', name: '景德镇市' },
      { code: 'px', name: '萍乡市' },
      { code: 'yichun', name: '宜春市' },
      { code: 'sr', name: '上饶市' },
      { code: 'fuzhou', name: '抚州市' },
      { code: 'ja', name: '吉安市' },
      { code: 'yingtan', name: '鹰潭市' },
      { code: 'xinyu', name: '新余市' },
      { code: 'gj', name: '赣江新区' }
    ],
    '山东': [
      { code: 'jn', name: '济南市' },
      { code: 'qd', name: '青岛市' },
      { code: 'zb', name: '淄博市' },
      { code: 'za', name: '枣庄市' },
      { code: 'dy', name: '东营市' },
      { code: 'yt', name: '烟台市' },
      { code: 'wf', name: '潍坊市' },
      { code: 'jn', name: '济宁市' },
      { code: 'ta', name: '泰安市' },
      { code: 'wh', name: '威海市' },
      { code: 'rz', name: '日照市' },
      { code: 'lc', name: '临沂市' },
      { code: 'dz', name: '德州市' },
      { code: 'ly', name: '聊城市' },
      { code: 'bz', name: '滨州市' },
      { code: 'hz', name: '菏泽市' }
    ],
    '湖北': [
      { code: 'wh', name: '武汉市' },
      { code: 'yc', name: '宜昌市' },
      { code: 'xf', name: '襄阳市' },
      { code: 'ez', name: '鄂州市' },
      { code: 'hs', name: '黄石市' },
      { code: 'shiyan', name: '十堰市' },
      { code: 'jingzhou', name: '荆州市' },
      { code: 'jingmen', name: '荆门市' },
      { code: 'xn', name: '咸宁市' },
      { code: 'suizhou', name: '随州市' },
      { code: 'ens', name: '恩施土家族苗族自治州' },
      { code: 'xg', name: '仙桃市' },
      { code: 'xiaogan',name:'孝感市'}
    ],
    '河南': [
      { code: 'zz', name: '郑州市' },
      { code: 'luoyang', name: '洛阳市' },
      { code: 'kaifeng', name: '开封市' },
      { code: 'pingdingshan', name: '平顶山市' },
      { code: 'anyang', name: '安阳市' },
      { code: 'hebi', name: '鹤壁市' },
      { code: 'xinxiang', name: '新乡市' },
      { code: 'jiaozuo', name: '焦作市' },
      { code: 'puyang', name: '濮阳市' },
      { code: 'xuchang', name: '许昌市' },
      { code: 'luohe', name: '漯河市' },
      { code: 'sanmenxia', name: '三门峡市' },
      { code: 'nanyang', name: '南阳市' },
      { code: 'shangqiu', name: '商丘市' },
      { code: 'xinyang', name: '信阳市' },
      { code: 'zhoukou', name: '周口市' },
      { code: 'zhumadian', name: '驻马店市' }
    ],
    '湖南': [
      { code: 'cs', name: '长沙市' },
      { code: 'zhuzhou', name: '株洲市' },
      { code: 'xiangtan', name: '湘潭市' },
      { code: 'hy', name: '衡阳市' },
      { code: 'shaoyang', name: '邵阳市' },
      { code: 'yy', name: '岳阳市' },
      { code: 'changde', name: '常德市' },
      { code: 'zhangjiajie', name: '张家界市' },
      { code: 'yiyang', name: '益阳市' },
      { code: 'chenzhou', name: '郴州市' },
      { code: 'yongzhou', name: '永州市' },
      { code: 'huaihua', name: '怀化市' },
      { code: 'loudi', name: '娄底市' },
      { code: 'xiangxi', name: '湘西土家族苗族自治州' }
    ],
    '广西': [
      { code: 'nn', name: '南宁市' },
      { code: 'liuzhou', name: '柳州市' },
      { code: 'gl', name: '桂林市' },
      { code: 'wuzhou', name: '梧州市' },
      { code: 'bh', name: '北海市' },
      { code: 'fcg', name: '防城港市' },
      { code: 'qinzhou', name: '钦州市' },
      { code: 'gg', name: '贵港市' },
      { code: 'yulin', name: '玉林市' },
      { code: 'baise', name: '百色市' },
      { code: 'hezhou', name: '贺州市' },
      { code: 'hechi', name: '河池市' },
      { code: 'lb', name: '来宾市' },
      { code: 'chongzuo', name: '崇左市' }
    ],
    '海南': [
      { code: 'haikou', name: '海口市' },
      { code: 'sanya', name: '三亚市' },
      { code: 'danzhou', name: '儋州市' },
    ],
    '重庆': [
      { code: 'cq', name: '重庆市' }
    ],
    '四川': [
      { code: 'cd', name: '成都市' },
      { code: 'zg', name: '自贡市' },
      { code: 'panzhihua', name: '攀枝花市' },
      { code: 'luzhou', name: '泸州市' },
      { code: 'deyang', name: '德阳市' },
      { code: 'mianyang', name: '绵阳市' },
      { code: 'guangyuan', name: '广元市' },
      { code: 'suining', name: '遂宁市' },
      { code: 'neijiang', name: '内江市' },
      { code: 'leshan', name: '乐山市' },
      { code: 'nanchong', name: '南充市' },
      { code: 'meishan', name: '眉山市' },
      { code: 'yibin', name: '宜宾市' },
      { code: 'guangan', name: '广安市' },
      { code: 'dazhou', name: '达州市' },
      { code: 'yaan', name: '雅安市' },
      { code: 'bazhong', name: '巴中市' },
      { code: 'ziyang', name: '资阳市' },
      { code: 'ab', name: '阿坝藏族羌族自治州' },
      { code: 'ganzi', name: '甘孜藏族自治州' },
      { code: 'liangshan', name: '凉山彝族自治州' }
    ],
    '贵州': [
      { code: 'gy', name: '贵阳市' },
      { code: 'liupanshui', name: '六盘水市' },
      { code: 'zunyi', name: '遵义市' },
      { code: 'anshun', name: '安顺市' },
      { code: 'bijie', name: '毕节市' },
      { code: 'tongren', name: '铜仁市' },
      { code: 'qdn', name: '黔东南苗族侗族自治州' },
      { code: 'qn', name: '黔南布依族苗族自治州' },
      { code: 'qxn', name: '黔西南布依族苗族自治州' }
    ],
    '云南': [
      { code: 'km', name: '昆明市' },
      { code: 'qujing', name: '曲靖市' },
      { code: 'yuxi', name: '玉溪市' },
      { code: 'baoshan', name: '保山市' },
      { code: 'zhaotong', name: '昭通市' },
      { code: 'lijiang', name: '丽江市' },
      { code: 'puer', name: '普洱市' },
      { code: 'lincang', name: '临沧市' },
      { code: 'chuxiong', name: '楚雄彝族自治州' },
      { code: 'honghe', name: '红河哈尼族彝族自治州' },
      { code: 'wenshan', name: '文山壮族苗族自治州' },
      { code: 'xishuangbanna', name: '西双版纳傣族自治州' },
      { code: 'dali', name: '大理白族自治州' },
      { code: 'dehong', name: '德宏傣族景颇族自治州' },
      { code: 'nujiang', name: '怒江傈僳族自治州' },
      { code: 'diqing', name: '迪庆藏族自治州' }
    ],
    '西藏': [
      { code: 'lasa', name: '拉萨市' },
      { code: 'rikaze', name: '日喀则市' },
      { code: 'changdu', name: '昌都市' },
      { code: 'linzhi', name: '林芝市' },
      { code: 'shannan', name: '山南市' },
      { code: 'naqu', name: '那曲市' },
      { code: 'ali', name: '阿里地区' }
    ],
    '陕西': [
      { code: 'xa', name: '西安市' },
      { code: 'tc', name: '铜川市' },
      { code: 'baoji', name: '宝鸡市' },
      { code: 'xianyang', name: '咸阳市' },
      { code: 'wn', name: '渭南市' },
      { code: 'yanan', name: '延安市' },
      { code: 'hanzhong', name: '汉中市' },
      { code: 'yl', name: '榆林市' },
      { code: 'ankang', name: '安康市' },
      { code: 'shangluo', name: '商洛市' },
      { code: 'xixian', name: '西咸新区' }
    ],
    '甘肃': [
      { code: 'lz', name: '兰州市' },
      { code: 'jiayuguan', name: '嘉峪关市' },
      { code: 'jinchang', name: '金昌市' },
      { code: 'baiyin', name: '白银市' },
      { code: 'tianshui', name: '天水市' },
      { code: 'wuwei', name: '武威市' },
      { code: 'zhangye', name: '张掖市' },
      { code: 'pingliang', name: '平凉市' },
      { code: 'jiuquan', name: '酒泉市' },
      { code: 'qingyang', name: '庆阳市' },
      { code: 'dingxi', name: '定西市' },
      { code: 'ln', name: '陇南市' },
      { code: 'lxs', name: '临夏回族自治州' },
      { code: 'gn', name: '甘南藏族自治州' },
      { code: 'lanzhou', name: '兰州新区' }
    ],
    '青海': [
      { code: 'xn', name: '西宁市' },
      { code: 'haidong', name: '海东市' },
      { code: 'haibei', name: '海北藏族自治州' },
      { code: 'huangnan', name: '黄南藏族自治州' },
      { code: 'hainan', name: '海南藏族自治州' },
      { code: 'guoluo', name: '果洛藏族自治州' },
      { code: 'yushu', name: '玉树藏族自治州' },
      { code: 'haixi', name: '海西蒙古族藏族自治州' }
    ],
    '宁夏': [
      { code: 'yinchuan', name: '银川市' },
      { code: 'shizuishan', name: '石嘴山市' },
      { code: 'wuzhong', name: '吴忠市' },
      { code: 'guyuan', name: '固原市' },
      { code: 'zhongwei', name: '中卫市' }
    ],
    '新疆': [
      { code: 'wulumuqi', name: '乌鲁木齐市' },
      { code: 'kelamayi', name: '克拉玛依市' },
      { code: 'tulufan', name: '吐鲁番市' },
      { code: 'hami', name: '哈密市' },
      { code: 'changji', name: '昌吉回族自治州' },
      { code: 'boertala', name: '博尔塔拉蒙古自治州' },
      { code: 'bayinguoleng', name: '巴音郭楞蒙古自治州' },
      { code: 'akesu', name: '阿克苏地区' },
      { code: 'kezilesu', name: '克孜勒苏柯尔克孜自治州' },
      { code: 'kashi', name: '喀什地区' },
      { code: 'hetian', name: '和田地区' },
      { code: 'yili', name: '伊犁哈萨克自治州' },
      { code: 'tacheng', name: '塔城地区' },
      { code: 'shihezi', name: '石河子市' },
      { code: 'aletai',name:'阿勒泰地区'},
      { code: 'wujiaqu', name: '五家渠市' },
    ],
})
  
  const selectProvince = (province) => {
    selectedProvince.value = province.name
    // 这里可以根据选中的省份加载对应的城市数据
  }
  
  const selectCity = (city) => {
    selectedCity.value = city.name
    emit('citySelected', city.name)
  }
  
  const handleBack = () => {
    selectedProvince.value = ''
    selectedCity.value = ''
  }

  const isDisabledProvince = (provinceName) => {
    return ['澳门', '香港', '台湾'].includes(provinceName)
  }
  </script>
  
  <style scoped>
  .region-selector {
    max-width: 1200px;
    margin: 0 auto;
    padding: 5px;
  }
  
  .section {
    background: #fff;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  
  .section-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  
  .section-area{
    background: #fff;
    border-radius: 8px;
    padding: 10px;
    height: 160px;
    margin-bottom: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .section-header-area {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }


  .icon {
    margin-right: 8px;
  }
  
  .title {
    font-size: 16px;
    font-weight: bold;
  }
  
  .back-link {
    margin-left: auto;
    color: #1890ff;
    cursor: pointer;
  }
  
  .province-grid,
  .city-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));
    gap: 6px;
  }
  
  .province-item {
    text-align: center;
    padding: 3px;
    border-radius: 4px;
    cursor: pointer;
    color: #333;
    text-decoration: none;
  }

  .city-item{
    text-align: center;
    padding: 1px;
    font-size: 12px;
    border-radius: 4px;
    cursor: pointer;
    color: #333;
    text-decoration: none;
  }
  
  .province-item:hover,
  .city-item:hover {
    background-color: #f0f0f0;
  }
  
  .active {
    color: #1890ff;
    background-color: #e6f7ff;
  }

  .disabled {
    pointer-events: none;
    color: #ccc;
  }
  </style>